<style>
    .panel-statistics h4 {
        color: #666;
        font-weight: 400;
        font-size: 14px;
    }

    .panel-statistics h3 {
        font-weight: 500;
        font-size: 14px;
        color: #333;
    }

    .panel-statistics em {
        font-style: normal;
    }

    .panel-statistics .pull-right {
        padding-right: 10px;
    }

    .panel-statistics .table thead tr th {
        font-weight: normal;
    }

    .panel-statistics .table tbody tr td {
        font-weight: normal;
        vertical-align: middle;
    }

    .panel-statistics .table tbody tr td p {
        margin: 0;
    }

</style>
<div class="btn-refresh hidden" id="resetecharts"></div>
<div class="row">
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>总订单金额</h4>
                    <h3>
                        ￥
                        <span id="totalOrderAmount">{$totalOrderAmount|sprintf='%.2f',###}</span>
                    </h3>
                </div>
                <div class="pull-right" style="color:#c8cfff;">
                    <i class="fa fa-cny fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>今日订单金额</h4>
                    <h3>
                        ￥
                        <span id="todayOrderAmount">{$todayOrderAmount|sprintf='%.2f',###}</span>
                        <em id="todayOrderRatio" data-toggle="tooltip" data-title="昨日：￥{$yesterdayOrderAmount|sprintf='%.2f',###}" class="text-{:$todayOrderRatio>=0?'success':'danger'}">
                            {:$todayOrderRatio>=0?'+':''}{$todayOrderRatio}%
                        </em>
                    </h3>
                </div>
                <div class="pull-right" style="color:#ffc8c8;">
                    <i class="fa fa-calendar fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>总用户数</h4>
                    <h3>{$totalUser}</h3>
                </div>
                <div class="pull-right" style="color:#c8e3ff;">
                    <i class="fa fa-users fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>今日新增用户数</h4>
                    <h3>
                        {$todayUser}
                        <em data-toggle="tooltip" data-title="昨日：{$yesterdayUser}" class="text-{:$todayUserRatio>=0?'success':'danger'}">{:$todayUserRatio>=0?'+':''}{$todayUserRatio}%</em>
                    </h3>
                </div>
                <div class="pull-right" style="color:#ffe9c8;">
                    <i class="fa fa-user fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-top:15px;">
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>总利润</h4>
                    <h3>
                        ￥
                        <span id="totalProfitAmount">{$totalProfitAmount|sprintf='%.2f',###}</span>
                    </h3>
                </div>
                <div class="pull-right" style="color:#c8e3ff;">
                    <i class="fa fa-gift fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>总退款金额</h4>
                    <h3>
                        ￥
                        <span id="totalRefundAmount">{$totalRefundAmount|sprintf='%.2f',###}</span>
                    </h3>
                </div>
                <div class="pull-right" style="color:#c8cfff;">
                    <i class="fa fa-reply-all fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>今日退款金额</h4>
                    <h3>
                        ￥
                        <span id="todayRefundAmount">{$todayRefundAmount|sprintf='%.2f',###}</span>
                    </h3>
                </div>
                <div class="pull-right" style="color:#ffc8c8;">
                    <i class="fa fa-calendar-times-o fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div class="pull-left">
                    <h4>昨天退款金额</h4>
                    <h3>
                        ￥
                        <span id="yesterdayRefundAmount">{$yesterdayRefundAmount|sprintf='%.2f',###}</span>
                    </h3>
                </div>
                <div class="pull-right" style="color:#c8e3ff;">
                    <i class="fa fa-calendar-minus-o fa-4x"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 订单分散地图 -->
<div class="row" style="margin-top:15px;">
    <div class="col-xs-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <!-- <h4>订单趋势</h4> -->
                <div id="datefilter">
                    <form id="form3" action="" role="form" novalidate class="form-inline">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" data-chart="chart3">
                            <i class="fa fa-refresh"></i>
                        </a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Today')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Yesterday')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:270px;">
                        </div>
                    </form>
                </div>
                <div id="echarts3" style="height:600px;width:100vw;margin-top:15px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- 订单金额 -->
<div class="row" style="margin-top:15px;">
    <div class="col-xs-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <!-- <h4>订单趋势</h4> -->
                <div id="datefilter">
                    <form id="form1" action="" role="form" novalidate class="form-inline">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" data-chart="chart1">
                            <i class="fa fa-refresh"></i>
                        </a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Today')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Yesterday')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:270px;">
                        </div>
                    </form>
                </div>
                <div id="echarts1" style="height:400px;width:100%;margin-top:15px;"></div>
            </div>
        </div>
    </div>
</div>
<!-- 订单数量 -->
<div class="row" style="margin-top:15px;">
    <div class="col-xs-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <!-- <h4>订单趋势</h4> -->
                <div id="datefilter">
                    <form id="form2" action="" role="form" novalidate class="form-inline">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" data-chart="chart2">
                            <i class="fa fa-refresh"></i>
                        </a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Today')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Yesterday')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:270px;">
                        </div>
                    </form>
                </div>
                <div id="echarts2" style="height:400px;width:100%;margin-top:15px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- -- -->
<div class="row" style="margin-top:15px;">
    <div class="col-xs-12 col-sm-4">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>今日商品销售排行</h4>
                <table class="table" style="width:100%">
                    <thead>
                    <tr>
                        <th width="60%">标题</th>
                        <th width="20%" class="text-center">金额</th>
                        <th class="text-center">占比</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="todayPaidList" id="item" empty="<tr><td colspan='3' class='text-center'>暂无数据</td></tr>"}
                    <tr>
                        <td>
                           <a href="{$item.url}" target="_blank"><p>{$item.title}</p></a>
                        </td>
                        <td>
                            <h5 class="text-center">{$item.amount}</h5>
                        </td>
                        <td>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" data-toggle="tooltip" data-title="{$item['percent']}%" style="width: {$item['percent']}%"></div>
                            </div>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>本周商品销售排行</h4>
                <table class="table" style="width:100%">
                    <thead>
                    <tr>
                        <th width="60%">标题</th>
                        <th width="20%" class="text-center">金额</th>
                        <th class="text-center">占比</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="weekPaidList" id="item" empty="<tr><td colspan='3' class='text-center'>暂无数据</td></tr>"}
                    <tr>
                        <td>
                            <a href="{$item.url}" target="_blank"><p>{$item.title}</p></a>
                        </td>
                        <td>
                            <h5 class="text-center">{$item.amount}</h5>
                        </td>
                        <td>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" data-toggle="tooltip" data-title="{$item['percent']}%" style="width: {$item['percent']}%"></div>
                            </div>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>本月商品销售排行</h4>
                <table class="table" style="width:100%">
                    <thead>
                    <tr>
                        <th width="60%">标题</th>
                        <th width="20%" class="text-center">金额</th>
                        <th class="text-center">占比</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="monthPaidList" id="item" empty="<tr><td colspan='3' class='text-center'>暂无数据</td></tr>"}
                    <tr>
                        <td>
                            <a href="{$item.url}" target="_blank"> <p>{$item.title}</p></a>
                        </td>
                        <td>
                            <h5 class="text-center">{$item.amount}</h5>
                        </td>
                        <td>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" data-toggle="tooltip" data-title="{$item['percent']}%" style="width: {$item['percent']}%"></div>
                            </div>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- -- -->
<div class="row" style="margin-top:20px;">
    <div class="col-xs-12 col-sm-4">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>热门搜索</h4>
                <table class="table" style="width:100%">
                    <thead>
                    <tr>
                        <th width="80%">关键字</th>
                        <th class="text-center">搜索次数</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="hotSearchList" id="item" empty="<tr><td colspan='2' class='text-center'>暂无数据</td></tr>"}
                    <tr>
                        <td>
                            <a href="{:addon_url('shop/search/index', ['q'=>$item.keywords])}" target="_blank"> <p>{$item.keywords}</p></a>
                        </td>
                        <td>
                            <h5 class="mb-0 text-center">{$item.nums}</h5>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>销量商品</h4>
                <table class="table" style="width:100%">
                    <thead>
                    <tr>
                        <th width="80%">商品名称</th>
                        <th width="20%" class="text-center">销量</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="hotGoodsList" id="item" empty="<tr><td colspan='2' class='text-center'>暂无数据</td></tr>"}
                    <tr>
                        <td>
                            <a href="{$item.url}" target="_blank"><p>{$item.title}</p></a>
                        </td>
                        <td>
                            <h5 class="mb-0 text-center">{$item.sales}</h5>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <h4>评价商品</h4>
                <table class="table" style="width:100%">
                    <thead>
                    <tr>
                        <th width="80%">商品名称</th>
                        <th width="20%" class="text-center">评论数</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="comGoodsList" id="item" empty="<tr><td colspan='2' class='text-center'>暂无数据</td></tr>"}
                    <tr>
                        <td>
                            <a href="{$item.url}" target="_blank"><p>{$item.title}</p></a>
                        </td>
                        <td>
                            <h5 class="mb-0 text-center">{$item.comments}</h5>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



<!-- 商品销售分类占比 -->
<div class="row" style="margin-top:15px;">
    <div class="col-xs-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div id="datefilter">
                    <form id="form4" action="" role="form" novalidate class="form-inline">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" data-chart="chart4">
                            <i class="fa fa-refresh"></i>
                        </a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Today')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Yesterday')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 7 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last 30 Days')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('Last month')}</a>
                        <a href="javascript:;" class="btn btn-success btn-filter">{:__('This month')}</a>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:270px;">
                        </div>
                    </form>
                </div>
                <div id="echarts4" style="height:600px;width:95vw;margin-top:15px;"></div>
            </div>
        </div>
    </div>
</div>


